<template>
	<div class="patient_box">
		<div class="patient_header">
			<div class="sex_box">
				<van-dropdown-menu>
				  <van-dropdown-item v-model="sreach.sex" :options="option1" />
				</van-dropdown-menu>
			</div>
			<div class="input_box">
				<van-search v-model="sreach.search" placeholder="请输入搜索关键词" />
			</div>
			<div class="change_box">
				<div v-for="item,index in changeList" :key="index" :class="index == active?'active':''" @click="active = index">{{item}}</div>
			</div>
		</div>
		<div class="patient_table">
			<reportList  v-if="active === 1" />
			<tableList v-else :tableData="tableData"/>
		</div>
	</div>
</template>

<script lang="ts" setup>
	import { ref, watch, onUnmounted,onMounted,computed,render } from 'vue';
	import { getpatinetList } from "@/api/patient";
	import tableList from "./component/tableList.vue";
	import reportList from "./component/reportList.vue";
	
	const sreach = ref<any>({ sex:'' });
	const active = ref(0);
	const option1 = [
	    { text: '全部性别', value: '' },
	    { text: '男性', value: 0 },
	    { text: '女性', value: 1 },
	];
	const changeList = ['待诊','报告'];
	const tableData = ref([]);
	
	async function getList(){
		const res = await getpatinetList();
		if(!res) return;
		tableData.value = res.map((item)=> ({ 
			// other:item,
			userName:item.userName, 
			sex:item.sex, 
			age:12,
			education:item.education,
			salt:item.salt,
			status:item.status
		}));
		// console.log(res, "res");
	}
	
	onMounted(()=>{
		getList();
	});
	
</script>

<style lang="less" scoped>
	.patient_box{
		padding: 20px;
		height: 100%;
		display: flex;
		flex-direction: column;
	}
	.patient_header{
		display: flex;
		>div{
			margin-left: 10px;
		}
		.sex_box{
			width:100px;
		}
		.input_box{
			width:200px;
		}
	}
	:deep(.van-dropdown-menu){
		.van-dropdown-menu__bar{
			height: 36px;
		}
	}
	
	:deep(.van-search){
		padding: 0;
		height: 36px;
		>div{
			background-color: #fff;
		}
	}
	.change_box{
		display: flex;
		// align-items: center;
		// justify-content: center;
		font-size: 14px;
		color: #29D38C;
		background: #E4FFF2;
		border-radius: 4px;
		border: 1px solid #24D28D;
		>div{
			display: inline-block;
			width: 70px;
			height: 36px;
			line-height: 36px;
			text-align: center;
		}
		.active{
			color:#fff;
			
			background: linear-gradient(298deg, #24D28D 10%, #71E677 87%);
		}
	}
	.patient_table{
		background-color: #fff;
		padding: 10px;
		margin-top: 10px;
		flex:1;
		overflow: auto;
	}
</style>